<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Stateful Array Grid Example</title>

    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="css/ext-all.css" />

    <!-- overrides to base library -->

    <!-- page specific -->
    <link rel="stylesheet" type="text/css" href="../shared/exalmples.css" />
    <link rel="stylesheet" type="text/css" href="css/grid-exalmples.css" />
    <link rel="stylesheet" type="text/css" href="../css/butlton.css" />
    <link rel="stylesheet" type="text/css" media="all" href="test.css" />

    <style type=text/css>
        /* style rows on mouseover */
        .x-grid3-row-over .x-grid3-cell-inner {
            font-weight: bold;
        }
        
        .BottomPromt{
        	display:none;position:absolute;z-index:1000;width:200px;
        	height:300px;background-color:white;
        	overflow:hidden;
        	border:1px solid #99BBE8;
        }
        
        .BottomPromt .content{
        	overflow-y:scroll; overflow-x:hidden;
        	width:200px;
        	height:270px;
        	float:left;
        }
        
        .BottomPromt .divRow{
        	float:left;
        	width:198px;
        	overflow:hidden;
        	border:1px solid #D0DEF0;
        }
        
        .BottomPromt .title{
        	float:left;
        	font-size:14px;
        	font-weight:bold;
        	height:30px;
        	background:#D0DEF0 url(./images/default/toolbar/bg.gif) repeat-x scroll left top;
        }
    </style>

    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="js/ext-base.js"></script>

    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="js/ext-all.js"></script>

    <!-- overrides to base library -->

    <!-- page specific -->
    <script type="text/javascript" src="js/extgrid.js"></script>
    
    <script type="text/javascript">
    
   // var mySoundObj1 = new FlashSound();

    //console.log('00000000000000 ',mySoundObj1);
    
    var promtPanel = null;
    
    Ext.onReady(function(){


        new Ext.form.DateField({
            fieldLabel: '',
            width:80,
            allowBlank:false,
            format:'m/d/y',
            applyTo: 'from'});

    	promtPanel = new Ext.Panel({
            title: 'Test 77',
            renderTo:Ext.getBody(),
            contentEl: 'testcontent',
            cls:'empty',
            height:250,
            width:500,
            tools:[{id:'minimize',handler:function(){promtPanel.collapse();}},
                   {id:'restore',handler:function(){promtPanel.expand();}}],
            style: {display:'', position:'absolute'}
        });

    	promtPanel.setPosition(500,600);
        
var proxy = new Ext.data.HttpProxy({
    method: 'GET',
    prettyUrls: false,
    url: './queryUsers.jsp', // see options parameter for Ext.Ajax.request

    api: {
        // all actions except the following will use above url

        create  : './queryUsers.jsp',
        update  : './queryUsers.jsp'
    }
});

    // simple array store
    var store = new Ext.data.ArrayStore({
    	autoLoad:true,
        fields: ['userid', 'name'],
        proxy:proxy
    });
    var combo = new Ext.form.ComboBox({
        store: store,
        displayField:'name',
        valueField:'name',
        typeAhead: true,
        mode: 'remote',
        minChars:1,
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'Select a user...',
        selectOnFocus:true,
        applyTo: 'local-states'
    });



    var proxy2 = new Ext.data.HttpProxy({
        method: 'GET',
        prettyUrls: false,
        url: './queryTrackers.jsp', // see options parameter for Ext.Ajax.request

        api: {
            // all actions except the following will use above url

            create  : './queryTrackers.jsp',
            update  : './queryTrackers.jsp'
        }
    });


 // simple array store
    var store2 = new Ext.data.ArrayStore({
    	autoLoad:true,
        fields: ['trackerid', 'trackername'],
        proxy:proxy2
    });
    var combo2 = new Ext.form.ComboBox({
        store: store2,
        displayField:'trackername',
        valueField:'trackername',
        typeAhead: true,
        mode: 'remote',
        minChars:1,
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'Select a tracker...',
        selectOnFocus:true,
        applyTo: 'trackersAutocomplete'
    });



    var proxy3 = new Ext.data.HttpProxy({
        method: 'GET',
        prettyUrls: false,
        url: './queryTrackersIME.jsp', // see options parameter for Ext.Ajax.request

        api: {
            // all actions except the following will use above url

            create  : './queryTrackersIME.jsp',
            update  : './queryTrackersIME.jsp'
        }
    });


 // simple array store
    var store3 = new Ext.data.ArrayStore({
    	autoLoad:true,
        fields: ['trackerid', 'usertrackerid'],
        proxy:proxy3
    });
    var combo3 = new Ext.form.ComboBox({
        store: store3,
        displayField:'usertrackerid',
        valueField:'usertrackerid',
        typeAhead: true,
        mode: 'remote',
        minChars:1,
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'Select a ID...',
        selectOnFocus:true,
        applyTo: 'trackersIMEAutocomplete'
    });
    

    
    });


    var win = null;
    Ext.onReady(function(){
    	var t = new Ext.form.TimeField({
            fieldLabel: '',
            increment:5,
            value:'00:00',
            format:'H:i',
            applyTo: 'startTime'
        });


    	//showDialog(0);
    	//closeDialog(0);

    	
createSearchGrid();
		
		closeDialog(0);
        
    });

    function showDialog(duration){

    	if(typeof duration == 'undefined'){
    		duration = 2;
        }
    	
		var bw = document.documentElement.clientWidth;
		var bh = document.documentElement.clientHeight + document.documentElement.scrollTop;	
		
		
		var prompt = Ext.get('prompt');
		var width = 220;
		var height = 320;
		
		prompt.setLeft((bw - width)+'px');
		prompt.setTop((bh - height)+'px');

		window.onresize = function(){
			 bw = document.documentElement.clientWidth;
			 bh = document.documentElement.clientHeight ;
			 prompt.setLeft((bw - width)+'px');
			 prompt.setTop((bh - height)+'px');
		}
		
		prompt.slideIn('b', { duration: duration });
		
    }


    function clearAlarmprompt(){
    	var prompt = Ext.get('prompt');
    	prompt.select(".content").update('');
    	
    }

    function insertRow(text){
    	var prompt = Ext.get('prompt');

       var div = document.createElement("div");
       div = Ext.get(div);
       div.addClass('divRow');
       div.update(text);
       prompt.select(".content").item(0).appendChild(div);
    }
    
    function closeDialog(duration){
    	var prompt = Ext.get('prompt');
    	if(typeof duration == 'undefined'){
    		duration = 2;
        }
    	var prompt = Ext.get('prompt');
    	prompt.slideOut('b', { duration: 0});
    }

    var regx = /(\d{2})\/(\d{2})\/(\d{4})/;  
    var matches = regx.exec('12/25/2009');

	//alert(null === undefined);
    
    //console.log(matches);
    </script>
    
<style>
.x-grid3-scroller {
overflow:hidden;
position:relative;
}
</style>
</head>

<body>
    <h1>Stateful Array Grid Example</h1>
    <p>This example shows how to create a grid from Array data.</p>
    <p>The grid is stateful so you can move or hide columns, reload the page, and come
    back to the grid in the same state you left it in.</p>
    <p>Note that the js is not minified so it is readable. See <a href="array-grid.js">array-grid.js</a>.</p>
    
    <div id="prompt" class="BottomPromt">
    
    <div class="divRow title">Alarm<div onclick="closeDialog();" class="x-tool x-tool-close"> </div></div>
	<div class="content">
	<div class="divRow">data fsfs</div>
    
    
    </div>
    </div>
    
    <div id="grid-trackers"></div>
    <br/>
    <input type=button value="show" onclick="showDialog();"/>
      <input type=button value="clear" onclick="clearAlarmprompt();"/>  
    <input type=button value="insertRow" onclick="insertRow('fdsfsdf  dsfd');"/>  
    
    
    <table cellpadding="10"><tr><td>
    <input style="left:20px;" type="text" id="local-states" size="20"/>
    </td></tr>
    
    <tr><td>
    <input style="left:20px;" type="text" id="trackersAutocomplete" size="20"/>
    </td></tr>
     
      <tr><td>
    <input style="left:20px;" type="text" id="trackersIMEAutocomplete" size="20"/>
    </td></tr>  
    
        <tr><td>
    <input style="left:20px;" type="text" id="startTime" size="10"/>
    </td></tr> 
    
    
    </table>
    
    <input name="createTimeFrom" id="from" type="text" value=""/>
    <br/>
    
    
<div id="locateButton"></div><script>
				Ext.onReady(function(){
					var button = new Ext.Button({renderTo:'locateButton',type:'button', text:'test buuton'});
					button.on('click',function(){
						setMapPosition(document.getElementById('lat_value').value, document.getElementById('lon_value').value);
						});
						});
				</script>
<div id="test" style="position:absolute;left:500px;top:300px;">fsafsfsd</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
test 099 0dsf989
<div style="width:1500px;height:20px; background-color:red"></div>

<div id="testcontent">test test f0909 ljl j0988*** ljj </div>
</body>
</html>